# CSS variables

:::warning 🚧 Still under development

:::

Rspress exposes some commonly used CSS variables. Compared to overriding Rspress's built-in React components, overriding CSS variables for customization is simpler and more maintainable.

You can edit and preview in real-time on this page, and copy to `theme/index.css` to override styles. Here is a simple example of style overriding:

import { Tabs, Tab } from '@theme';

<Tabs>
<Tab label="theme/index.tsx">

```tsx
import './index.css';
export * from '@rspress/core/theme';
```

</Tab>
<Tab label="theme/index.css">
```css
/* Copy CSS variable code here to override styles */
```
</Tab>
</Tabs>

Below are some CSS variables provided by Rspress and their default values:

## Brand colors

import { CssPickerEditor } from '../../components/CssPickerEditor';

<CssPickerEditor />

## Codeblock - shiki theme

import { ShikiThemeSwitcher } from '../../components/ShikiThemeSwitcher';

<ShikiThemeSwitcher />

## Codeblock - outer title and container

import { CssLiveCodeEditorWithDefault } from '../../components/CssLiveCodeEditor';

import rawCodeScss from '../../../../packages/core/src/theme/styles/vars/code-vars.css?raw';

<CssLiveCodeEditorWithDefault defaultValue={rawCodeScss} />

```tsx title="foo.ts"
console.log('This is a code block');
```

## Default homepage

import rawCodeHome from '../../../../packages/core/src/theme/styles/vars/home-vars.css?raw';

<CssLiveCodeEditorWithDefault defaultValue={rawCodeHome} />

## Base variables

import rawCodeBase from '../../../../packages/core/src/theme/styles/vars/base-vars.css?raw';

<CssLiveCodeEditorWithDefault defaultValue={rawCodeBase} />
